import React, { memo } from "react";
import { Divider, Typography, Row, Col } from "antd";
import { BusinessPartnersContainer } from "./style";
import { useTranslation } from "react-i18next";
import b1 from "@/assets/img/facebook-807588_640.png";
import b2 from "@/assets/img/follow-826033_640.png";
import b3 from "@/assets/img/icon-720944_640.png";
import b4 from "@/assets/img/microsoft-80658_640.png";
const business = [
  { src: b1, title: "facebook" },
  { src: b2, title: "instagram" },
  { src: b3, title: "Youtube" },
  { src: b4, title: "microsoft" },
];
const BusinessPartners = memo(() => {
  const { t } = useTranslation();
  return (
    <BusinessPartnersContainer>
      <Divider orientation="left" plain>
        <Typography.Title level={3}>
          {t("home_page.joint_venture")}
        </Typography.Title>
      </Divider>
      <Row>
        {business.map((item, index) => {
          return (
            <Col span={6} key={index}>
              <img src={item.src} alt={item.title} className="Img" />
            </Col>
          );
        })}
      </Row>
    </BusinessPartnersContainer>
  );
});

export default BusinessPartners;
